 
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>消息盒子</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"/>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css" integrity="sha512-ARJR74swou2y0Q2V9k0GbzQ/5vJ2RBSoCWokg4zkfM29Fb3vZEQyv0iWBMW/yvKgyHSR/7D64pFMmU8nYmbRkg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="../../../../../mdb5/css/mdb.min.css"/>
   <style>
</style>
</head>
<body>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">选择分组</h5>
                <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <select id="selectpicker" class="selectpicker">
                    <option>da</option>
                    <option>wq</option>
                    <option>op</option>
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal" >放弃添加</button>
                <button type="button" class="btn btn-primary" data-mdb-dismiss="modal"  onclick="acceptInvitationU(this)">确认分组</button>
            </div>
        </div>
    </div>
</div>

<div class="table-demo">
    <table id="table"></table>
</div>
<!--<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>-->

<!-- Include the JavaScript file
for Bootstrap table -->
<script src="../../../../../webjars/jquery/3.3.1-1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!--<script src="../../../../../layui/layui.js"></script> -->

<!--&lt;!&ndash;<script src="../../../../../webjars/bootstrap/4.0.0/js/bootstrap.min.js"></script>&ndash;&gt;-->
<!--<script src="../../../../../layim/dist/layim.js">-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js" integrity="sha512-yDlE7vpGDP7o2eftkCiPZ+yuUyEcaBwoJoIhdXv71KZWugFqEphIS3PU60lEkFaz8RxaVsMpSvQxMBaKVwA5xg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src=
                "https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js">
</script>
<script type="text/javascript" src="../../../../../mdb5/js/mdb.min.js"></script>
<script>


    //设置需要显示的列
    var columns = [{
        field: 'username',
        title: '用户名'
    }, {
        field: 'avatar',
        title: '头像',
        formatter:function(value, item, index) {
            return '<img src="'+value+'" style="width: 48px; height: 37px;"'+' />';
        }
    }, {
        field: 'type',
        title: '类别'
    }, {
        field: 'remark',
        title: '附言'
    }
    ];


    $('#table').bootstrapTable({
        columns: columns, //列对象
        data: JSON.parse(sessionStorage.getItem("addMessageList")),//要显示的数据对象
        toggle:"table",
        detailView:true,
        detailFormatter:"detailFormatter",
        onExpandRow:function(index, row, $detail)
        {
            var li=[];
            li=JSON.parse(sessionStorage.getItem("addMessageList"));
            sessionStorage.setItem("chossenOne",JSON.stringify(li.at(index)));
        //打开之后，存储该申请
        }
    });
    //告知服务端已经统一请求，并返回次分组号
    function acceptInvitationU(){
        var backMessage=JSON.parse(sessionStorage.getItem('chossenOne'));
        var nowfz=sessionStorage.getItem('nowfz');
        console.log(backMessage);
        console.log(nowfz);
        $.ajax({
            method: 'post',
            url: 'http://localhost:8080/init/msgbox/'+sessionStorage.getItem("id")+'/'+nowfz,
            cache: true,
            contentType:"application/json",
            type: "POST",
            data:  sessionStorage.getItem('chossenOne')
        }).then(res => {
            console.log(res)
            if (res.code != 0){
                layer.msg(res.msg)
            }
            $('#table').bootstrapTable('refresh');
        });
    }
    //告知服务端已经统一请求，并返回次分组号
    function acceptInvitationFG(){
    }

    function detailFormatter(index, row) {
        var html = [];
        if (row.type==='好友'){
            html.push(' <div class="row">\n' +
                '    <div class="col">\n' +
                '<button type="button" class="btn btn-info"   data-mdb-toggle="modal" data-mdb-target="#exampleModal">接受</button>\n' +
                '    </div>\n' +
                '    <div class="col">\n' +
                '<button type="button" class="btn btn-danger"   onclick="deneyInvitation()">拒绝</button>\n' +
                '    </div>\n' +
                '  </div>')
        }else {
            html.push(' <div class="row">\n' +
                '    <div class="col">\n' +
                '<button type="button" class="btn btn-info"   onclick="acceptInvitationFG()">接受</button>\n' +
                '    </div>\n' +
                '    <div class="col">\n' +
                '<button type="button" class="btn btn-danger"  onclick="deneyInvitation()">拒绝</button>\n' +
                '    </div>\n' +
                '  </div>')
        }
        return html.join('')
    }
    function deneyInvitation(){
        var targ=JSON.parse(sessionStorage.getItem('chossenOne'));
        $.get("/init/msgbox/delete/"+targ.messageId,function (res) {
        })
        var obj=$('#table');
        obj.bootstrapTable('remove',sessionStorage.getItem('chossenOne'));

        setTimeout(function (){
            updateData();
            console.log('deney');
            console.log(sessionStorage.getItem('addMessageList'))
        }, 5000);
    }
    //打开modal后初始化
    $('#exampleModal').on('show.bs.modal', function (event) {

        var modal = $(this);
        var op=[];
        op=JSON.parse(sessionStorage.getItem("friendGroup"));
        // modal.find('.modal-title').text('New message to ' + recipient);
        var options='';
        op.forEach((item)=>{
            options+= '<option>' + item.groupname + '</option>';
        })
        var picker= modal.find('#selectpicker');
        picker.empty();
        picker.append(options);
        picker.selectpicker('refresh');
        console.log(picker.selectpicker('val'))
    });
    //记录选取的分组
    $('#exampleModal').on('hide.bs.modal',function (event){
        var modal = $(this);
        var picker= modal.find('#selectpicker');

        //nowfz 分组名
        sessionStorage.setItem("nowfz",picker.selectpicker('val'))
    })
    $('#exampleModal').on('hidden.bs.modal',function (event){
        // console.log('hidden.bs.modal')
    })
    function updateData(){
        console.log('update')
        $.get("http://localhost:8080/init/msgbox/"+sessionStorage.getItem('id'),function (res) {
            sessionStorage.setItem("addMessageList",JSON.stringify(eval(res.data.list)));
            console.log(res.data.list)
        })
        console.log(sessionStorage.getItem('addMessageList'))
        $('#table').bootstrapTable('refresh');

    }
</script>



</body>
</html>
